import { defineComponent, toRefs, computed, PropType } from "vue";
import { Fragment } from 'vue-frag'


import MainNodeProcessWrap from '@src/modules/trigger/components/ProcessNodeChart/components/MainNodeProcessWrap'
import ArrowLine from '@src/modules/trigger/components/ProcessNodeChart/components/ArrowLine'
/* type */
import type { ProcessNodeListItem } from '@src/modules/trigger/model/interface/index.ts'
import '@src/modules/trigger/components/ProcessNodeChart/style/node.scss'

export default defineComponent({
    name: 'ConditionOrParallelNode',
    props: {
        nodeData: {
            type: Object as PropType<ProcessNodeListItem>,
            default: ()=> {}
        },
        nodeList: {
            type: Array,
            default: ()=> []
        },
        nodeIndex: {
            type: Number,
            default: 1
        }
    },
    setup(props) {
        const { nodeData, nodeIndex } = toRefs(props)

        const cNodeIndex = computed(() => {
            return nodeIndex.value
        })


        return ()=> (
            <div class="process-node-condition__container">
                <div class="process-node-condition__children">
                    {
                        nodeData.value.children.map(nodeItem => {
                            return (
                                <div class="process-node-condition__children-item">
                                    { nodeData.value.children.length > 1 ? (
                                        <Fragment>
                                            <div class="process-node-condition__children-item-line top-line"></div>
                                            <div class="process-node-condition__children-item-line bottom-line"></div>
                                        </Fragment>
                                    ) : null }
                                    <div class="process-node-condition__children-item-line__link top-line-link"></div>
                                    <div class="process-node-condition__children-item-line__link bottom-line-link"></div>
                                    <MainNodeProcessWrap 
                                        key={nodeData.value.uniqueId}
                                        nodeIndex={cNodeIndex.value}
                                        nodeList={nodeItem.children}
                                        nodeData={nodeItem}/>
                                </div>
                            )
                        })
                    }
                </div>
                {/* <ArrowLine></ArrowLine> */}
            </div>
        )
    }
})